<template>
  <div>
    <h3>支付类型</h3>
    <div class="lx">
      <button :class="{ active: isActive1 }" @click="fn(1)">
        先下单后付款
      </button>
      <button :class="{ active: isActive2 }" @click="fn(2)">
        允许先付款后下单
      </button>
      <button :class="{ active: isActive3 }" @click="fn(3)">仅允许下单</button>
    </div>
    <h3>合单模式</h3>
    <div class="lz">
      <button :class="{ active: isActive4 }" @click="fn1(1)">
        先下单后付款
      </button>
      <button :class="{ active: isActive5 }" @click="fn1(2)">
        允许先付款后下单
      </button>
    </div>
    <div class="ls">
      <el-button type="primary" @click="fn3()">确定</el-button>
      <el-button type="primary" @click="fn2()">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive1: false,
      isActive2: false,
      isActive3: false,
      isActive4: false,
      isActive5: false,
    };
  },
  methods: {
    fn(num) {
      if (num === 1) {
        this.isActive1 = true;
        this.isActive2 = false;
        this.isActive3 = false;
      } else if (num === 2) {
        this.isActive1 = false;
        this.isActive2 = true;
        this.isActive3 = false;
      } else if (num === 3) {
        this.isActive1 = false;
        this.isActive2 = false;
        this.isActive3 = true;
      }
    },
    fn1(num) {
      if (num === 1) {
        this.isActive4 = true;
        this.isActive5 = false;
      } else if (num === 2) {
        this.isActive4 = false;
        this.isActive5 = true;
      }
    },
    fn2() {
      this.isActive1 = false;
      this.isActive2 = false;
      this.isActive3 = false;
      this.isActive4 = false;
      this.isActive5 = false;
    },
    fn3() {
      alert("修改成功");
    },
  },
};
</script>

<style scoped>
.active {
  background-color: #409eff;
  color: #fff;
}
button {
  width: 100px;
  height: 50px;
  background-color: #fff;
  color: #000;
  border-radius: 5px;
  border-color: rgba(220, 220, 220, 1);
}
.lx {
  display: flex;
  width: 1123px;
  height: 200px;
  align-items: center;
  justify-content: space-evenly;
}
.lz {
  display: flex;
  width: 818px;
  height: 200px;
  align-items: center;
  justify-content: space-evenly;
}
.ls {
  display: flex;
  width: 880px;
  flex-direction: row;
  justify-content: center;
}
</style>